<template>
  <div class="room-content">
    <Navbar :appTitle="appTitle" />
    <Search ref="topSearch" style='padding-top:0.1rem' class="search" placeholder="报修编号|设备编号|设备名称" :isScreen="true" :isType="true" @onSearch="onSearch"
      @onScreen="onScreen">
    </Search>
    <van-dropdown-menu active-color="#1989fa">
      <van-dropdown-checkbox title="维修状态" :key='selecKey' :selectValue='selectOneValue' :columns="repairList"
        @comfirm="multipleConfirm('selectOneValue','status',$event)">
      </van-dropdown-checkbox>
      <van-dropdown-checkbox title="设备类别" :key='selecTwoKey' :selectValue='selectTwoValue' :columns="deviceClass"
        @comfirm="multipleConfirm('selectTwoValue','deviceCategory',$event)">
      </van-dropdown-checkbox>
      <van-dropdown-checkbox title="紧急程度" :key='selecThreeKey' :selectValue='selectThreeValue' :columns="urgentList"
        @comfirm="multipleConfirm('selectThreeValue','urgency',$event)">
      </van-dropdown-checkbox>
    </van-dropdown-menu>
    <search-tag ref="SearchTag" @getCategory="getCategory">
    </search-tag>
    <!--分页列表 -->
    <div class="listBox">
      <pageList ref="pageList" :checkedShow="false" :columns="columns" :listUrl="listUrl" @handleList="handleList" @operationItem='operationItem'>
        <div slot="label" slot-scope="{item}" class="labelBox">
          <div class="labelLeft" :style="{color:checkColor(item)}" v-show="item.statusText">{{item.statusText}}</div>
          <div class='labelRight' :style="{color:'#1890ff'}" v-show="item.urgencyText">{{item.urgencyText}}</div>
        </div>
      </pageList>
    </div>
    <!-- dialog弹框 -->
    <van-dialog v-model="showDialog" show-cancel-button confirm-button-color="#1890FF" :showCancelButton='false' confirmButtonText='我知道了'>
      <div slot="title" class="dialogContentBox">
        <van-icon name="warning-o" size="0.20rem" color="#FF943E" /><span style="margin-left: 0.07rem">无法批量报工</span>
      </div>
      <div style="margin: 0.1rem 0.46rem 0.3rem 0.46rem; color: #888888">
        {{dialogMessage}}
      </div>
      <div style="background: #f0f0f0; width: 100%; height: 0.01rem"></div>
    </van-dialog>
  </div>
</template>

<script>
import VanDropdownCheckbox from "@/views/workManagement/defectsDeal/VanDropdownCheckbox";
import Search from "@/components/search";
import SearchTag from "./myRepairSearchTag";
import Navbar from "@/components/navBar/navBar_right";
import TabBar from "@/components/TabBar";
import pageList from "@/components/pageList";
import { processTaskCompletionStatics, deleteTaskApi } from "@/api/mobile";
import { ajaxGetDictItems } from "@/api/api";
export default {
  name: "carRoomList",
  components: {
    Navbar,
    TabBar,
    pageList,
    Search,
    SearchTag,
    VanDropdownCheckbox,
  },
  data() {
    return {
      showDialog: false,
      dialogMessage: "",
      listUrl: "/assetmgt/messDeviceRepair/list", //列表接口
      columns: {
        titleKey: "deviceCode", //标题
        subtitleKey: "deviceName", //副标题
        content: [
          //内容
          {
            name: "报修编号",
            key: ["repairCode"],
          },
          {
            name: "设备类别",
            key: ["deviceCategoryText"],
          },
        ],
        labelKey: ["statusText", "urgencyText"], //标签
        operation: [
          //操作
          {
            name: "维修汇报",
            icon: require("@/assets/actionIcon/repairReport.png"),
          },
          {
            name: "退回",
            icon: require("@/assets/actionIcon/backOut.png"),
          },
        ],
      },
      keyword: "",
      dropdownObj: {
        status: "",
        deviceCategory: "",
        urgency: "",
      },
      repairList: [
        { text: "维修中", value: "repairing" },
        { text: "待验证", value: "wait_verify" },
        { text: "已完成", value: "completed" },
      ],
      selectOneValue: ["repairing"],
      selectTwoValue: [],
      selectThreeValue: [],
      selecKey: 9999,
      selecTwoKey: 0,
      selecThreeKey: -1,
      appTitle: "维修任务",
      deviceClass: [],
      urgentList: [],
    };
  },
  computed: {},
  beforeRouteLeave(to, from, next) {
    if (this.$refs.SearchTag.showSearchTag) {
      this.appTitle = "维修任务";
      this.$refs.SearchTag.showSearchTag = false;
      next(false);
    } else {
      next();
    }
  },
  created() {
    this.getDictCode();
  },
  mounted() {
    this.dropdownObj.status = this.selectOneValue.join(",");
    let searchObj = {
      ...this.dropdownObj,
      keyword: this.keyword,
    };
    this.searchQuery(searchObj);
  },
  methods: {
    getDictCode() {
      ajaxGetDictItems("mess_repair_urgent_level", null).then((res) => {
        if (res.success) {
          this.urgentList = res.result;
        }
      });
      ajaxGetDictItems("mess_device_category", null).then((res) => {
        if (res.success) {
          this.deviceClass = res.result;
        }
      });
    },

    checkColor(row) {
      let colorStr = "";
      switch (row.status) {
        case "not_effective":
          colorStr = "#ff4d4f";
          break;
        case "wait_receipt":
          colorStr = "#191f25";
          break;
        case "repairing":
          colorStr = "#1890ff";
          break;
        case "wait_verify":
          colorStr = "#ff943e";
          break;
        case "completed":
          colorStr = "#00b042";
          break;
      }
      return colorStr;
    },
    multipleConfirm(typeOne, typeTwo, v) {
      this[typeOne] = v.split(",");
      this[typeOne] = this[typeOne].filter((item) => item);
      this.dropdownObj[typeTwo] = v;
      this.dropDownChang();
    },
    dropDownChang() {
      let searchObj = {
        ...this.dropdownObj,
        keyword: this.keyword,
      };
      this.searchQuery(searchObj);
    },
    onSearch(v) {
      this.keyword = v;
      let searchObj = {
        ...this.dropdownObj,
        keyword: this.keyword,
      };
      this.searchQuery(searchObj);
    },
    onScreen() {
      this.appTitle = "更多筛选";
      this.keyword = this.$refs.topSearch.value;
      let pramsObj = JSON.parse(JSON.stringify(this.dropdownObj));
      pramsObj.keyword = this.keyword;
      this.$refs.SearchTag.showModal(this.keyword, pramsObj);
    },
    getCategory(sureObj) {
      this.appTitle = "维修任务";
      this.selecKey += 1;
      this.selecTwoKey += 1;
      this.selecThreeKey -= 1;
      this.keyword = sureObj.keyword;
      this.$refs.topSearch.value = sureObj.keyword;
      this.selectOneValue =
        sureObj.status.length > 0 ? sureObj.status.split(",") : [];
      this.selectTwoValue =
        sureObj.deviceCategory.length > 0
          ? sureObj.deviceCategory.split(",")
          : [];
      this.selectThreeValue =
        sureObj.urgency.length > 0 ? sureObj.urgency.split(",") : [];
      this.dropdownObj = JSON.parse(JSON.stringify(sureObj));
      delete this.dropdownObj.keyword;
      this.searchQuery(sureObj);
    },
    //列表点击更多按钮事件
    handleList(id, item, type) {
      if (type == "列表") {
        this.$router.push({
          path: "/repairDetail",
          query: {
            id: id,
            detailType: "malfunctionList",
          },
        });
      }
      if (type == "更多操作") {
        this.columns.operation = [];
        if (item.status == "repairing") {
          this.columns.operation.push(
            {
              name: "维修汇报",
              icon: require("@/assets/actionIcon/repairReport.png"),
            },
            {
              name: "退回",
              icon: require("@/assets/actionIcon/backOut.png"),
            }
          );
        } else {
          this.$toast("暂无操作");
        }
      }
    },
    operationItem(item, type) {
      if (type == "退回") {
        this.$router.push({
          path: "/maintenanceReturn",
          query: {
            id: item.id,
          },
        });
      } else {
        this.$router.push({
          path: "/maintenanceReport",
          query: { ...item },
        });
      }
    },
    // 搜索
    searchQuery(searchObj) {
      let params = {
        ...searchObj,
      };
      this.$refs.pageList.searchQuery(params);
    },
  },
};
</script>
<style lang="scss" scoped>
.room-content {
  height: 100vh;
  overflow-y: scroll;
  .serach {
    height: 0.33rem;
    background: #f2f2f6;
    border-radius: 0rem;
    margin-bottom: 0.16rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 0.33rem;
    padding: 0.1rem 0.12rem;
    // border: 1px solid red;
    .placeh {
      font-size: 0.16rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #888888;
      line-height: 0.23rem;
    }
    .icon {
      width: 0.15rem;
      height: 0.16rem;
    }
  }
  .serach-content {
    // height: 1.52rem;
    background: #ffffff;
    padding: 0 0.16rem 0.16rem 0.16rem;
    .content {
      display: flex;
      .tapbtn {
        // height: 0.23rem;
        // background: #1890ff;
        background: #f2f2f6;
        border-radius: 0.02rem;
        font-size: 0.16rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #888888;
        line-height: 0.23rem;
        margin-right: 0.12rem;
        text-align: center;
        padding: 0.04rem 0.28rem;
        cursor: pointer;
      }
      .active {
        color: #ffffff;
        background: #1890ff;
      }
    }
  }
}
.labelBox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 0.14rem;
  .labelLeft {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f6fe;
    border-radius: 0.02rem;
    box-sizing: border-box;
    padding: 0.03rem 0.07rem;
    margin-right: 0.05rem;
    font-size: 0.11rem;
  }
  .labelRight {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f6fe;
    border-radius: 0.02rem;
    box-sizing: border-box;
    padding: 0.03rem 0.07rem;
    font-size: 0.11rem;
  }
}
.listBox {
  height: calc(100vh - 1.5rem);
  overflow-y: auto;
}
.dialogContentBox {
  text-align: left;
  margin: 0.1rem 0.19rem;
  color: #191f25;
  font-size: 0.16rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
/deep/ .van-dropdown-menu__bar {
  box-shadow: none;
}
.operateBox {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  padding-right: 0.07rem;
  font-size: 0.14rem;
  font-weight: 500;
  color: #1890ff;
}
</style>